<template>
	<view :style="colorStyle">
		<view class="">
			<view class="uni-list">
				<view class="uni-list-cell" >

					<view class="uni-list-cell-db select">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
						<text class="icon-xiangxia iconfont" style="font-size: 18rpx;margin-left: 10rpx;"></text>
					</view>--
					<view class="uni-list-cell-db select">
						<picker mode="date" :value="dates" :start="startDate" :end="endDate" @change="bindDateChanges">
							<view class="uni-input">{{dates}}</view>
						</picker>
						<text v-if='dates' class="icon-xiangxia iconfont" style="font-size: 18rpx;margin-left: 10rpx;"></text>
					</view>
				</view>
			</view>
		</view>
		<view class='address-management' :class='addressList.length < 1 && page > 1 ? "fff":""'>
			<view class="list">
				<view class="header">
					<text>日期</text>
					<text>订单数</text>
					<text>金额</text>
				</view>
				<view class="" v-for="(i,n) in  addressList">
					<text>{{i.time}}</text>
					<text>{{i.count}}</text>
					<text>{{i.price}}</text>
				</view>
			</view>

			<view class='loadingicon acea-row row-center-wrapper' v-if="addressList.length">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
			<view class='noCommodity' v-if="addressList.length < 1 && page > 1">
				<view class='pictrue'>

				</view>
			</view>
			<view style='height:120rpx;'></view>

		</view>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		allDinghuo
	} from '@/api/store.js'
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home
		},
		mixins: [colors],
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				addressList: [],
				cartId: '',
				pinkId: 0,
				couponId: 0,
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
				page: 1,
				limit: 20,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				news: '',
				noCoupon: 0,
				date: currentDate,
				timeStamp: 0,
				dates:"--"
			};
		},
		computed: {

			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}

		},
		onLoad(options) {
			// if (this.isLogin) {
			// 	that.getAddressList(true);
			// } else {
			// 	toLogin();
			// }
		},
		onShow: function() {
			let that = this;
			that.getAddressList(true);
		},
		methods: {
			onLoadFun: function() {
				this.getAddressList();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				
			},
			bindDateChanges:function(e){
				console.log(e)
				this.dates= e.detail.value
				this.getAddressList(true)
			},
			getDate(type) {
				const date = new Date();
				this.timeStamp = date.getTime()
				console.log(date)
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			/**
			 * 获取地址列表
			 * 
			 */
			getAddressList: function(isPage) {
				let that = this;
				let time = new Date(this.date).getTime()/1000
				let times = new Date(this.dates).getTime()/1000
				if(time>times ){
					return this.$utils.Tips('结束月份需大于开始月份')
				}
				
				if (isPage) {
					that.loadend = false;
					that.page = 1;
					that.$set(that, 'addressList', []);
				};
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				allDinghuo({
					page: that.page,
					limit: that.limit,
					type: 'order',
					time:time+ '-'+times
				}).then(res => {

					let list = res.data;
					let loadend = list.length < that.limit;
					that.addressList = that.$util.SplitArray(list, that.addressList);
					that.$set(that, 'addressList', that.addressList);
					that.loadend = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
					that.page = that.page + 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			},

		},
		onReachBottom: function() {
			this.getAddressList();
		}
	}
</script>

<style lang="scss">
	.list {
		background-color: #fff;
		padding: 40rpx;

		.header {
			margin-bottom: 40rpx;
		}

		view {
			display: flex;
			text-align: center;
			justify-content: space-around;

			text {
				display: inline-block;
				width: 240rpx;
			}
		}
	}
	.uni-list-cell{
		display:flex;
		align-items:center
	}
	.select {
		display: flex;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
		margin: 20rpx;
		background: #fff;
		width: 240rpx;
		align-items: center;
			
		uni-picker{
			width: 160rpx;
			text-align:center
		}
	}
</style>
